<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6 ielt8"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7 ielt8"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->

<head>
    <!--META-->
    <meta charset="utf-8">
    <title>Login Form</title>
    <%@include file="common/taglib_includes.jsp" %>
    <%@include file="common/commonJS.jsp" %>
    <!--STYLESHEETS-->
    <link href="style/login.css" rel="stylesheet" type="text/css" />

    <!--SCRIPTS-->
    <script type="text/javascript" src="script/jquery-2.1.1.js"></script>
    <!--Slider-in icons-->
    <script type="text/javascript">
        $(document).ready(function () {
        	var intputElements = document.getElementsByTagName("INPUT");
			for (var i = 0; i < intputElements.length; i++) {
				intputElements[i].oninvalid = function (e) {
					e.target.setCustomValidity("");
					if (!e.target.validity.valid) {
						if (e.target.name == "username") {
							e.target.setCustomValidity("The field 'Username' cannot be left blank");
						}
						else {
							e.target.setCustomValidity("The field 'Password' cannot be left blank");
						}
					}
				};
			}
        	
            $("#username").focus(function () {
                $(".user-icon").css("left", "-48px");
            });
            $("#username").blur(function () {
                $(".user-icon").css("left", "0px");
            });

            $("#password").focus(function () {
                $(".pass-icon").css("left", "-48px");
            });
            $("#password").blur(function () {
                $(".pass-icon").css("left", "0px");
            });
        });
    </script>

</head>

<body>

    <!--WRAPPER-->
    <div id="wrapper">

        <!--SLIDE-IN ICONS-->
        <div class="user-icon"></div>
        <div class="pass-icon"></div>
        <!--END SLIDE-IN ICONS-->

        <!--LOGIN FORM-->
        <form:form id="loginForm" name="login-form" class="login-form" action="login.do" commandName="loginUser" method="post">

            <!--HEADER-->
            <div class="header">
                <!--TITLE-->
                <h1>Login Form</h1>
                <!--END TITLE-->
                <!--DESCRIPTION--><span>Fill out the form below to login to my super awesome imaginary control panel.</span>
                <!--END DESCRIPTION-->
            </div>
            <!--END HEADER-->

            <!--CONTENT-->
            <div class="content">
                <!--USERNAME-->
                <input id="username" name="username" type="text" class="input username" placeholder="USERNAME" required/>
                <!--END USERNAME-->
                <!--PASSWORD-->
                <input id="password" name="password" type="password" class="input password" placeholder="PASSWORD" required/>
                <!--END PASSWORD-->
            </div>
            <!--END CONTENT-->

            <!--FOOTER-->
            <div class="footer">
                <!--LOGIN BUTTON-->
                <input type="submit" name="submit" value="Login" class="button" />
                <!--END LOGIN BUTTON-->
                <!--REGISTER BUTTON-->
                <input type="submit" name="submit" value="Register" class="register" />
                <!--END REGISTER BUTTON-->
            </div>
            <!--END FOOTER-->

        </form:form>
        <!--END LOGIN FORM-->

    </div>
    <!--END WRAPPER-->

    <!--GRADIENT-->
    <div class="gradient"></div>
    <!--END GRADIENT-->

</body>

</html>